<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8"/>
	<title>blog编辑器1</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<meta name="description" content=""/>
	<meta name="author" content=""/>

	<!-- Jquery -->
	<script th:src="@{/plugins/jquery/jquery-2.1.1.js}"></script>
	<!--blog ide-->
	<script th:src="@{/plugins/blog/js/editormd.min.js}"></script>
	<!-- blog ide -->
	<link th:href="@{/plugins/blog/css/edi	tormd.min.css}" rel="stylesheet"/>
	<!-- Bootstrap core CSS -->
	<link rel="stylesheet" th:href="@{/plugins/bootstrap/bootstrap.min.css}">
	<!-- index -->
	<link th:href="@{/module/index/index.min.css}" rel="stylesheet" />
	<!-- layer +layui -->
	<script th:src="@{/plugins/layer/layer.js}"></script>
	<script th:src="@{/plugins/layui/layui.all.js}"></script>
	<link th:href="@{/plugins/layui/css/layui.css}" rel="stylesheet" />


</head>

<body class="overflow-hidden">
<div class="padding-md">
	<ul class="breadcrumb">
		<li><span class="primary-font"><i class="icon-home"></i></span><a href="#"> 主页</a></li>
		<li id="navLi2">写博客</li>
	</ul>
	<div style="margin: 10px;">
		<input type="text" id="title" class="form-control" style="width:80%;background-color: #f6f6f6;margin-right: 10px;float:left;height:40px;font-size:25px;font-family: 微软雅黑;border:0px;"/>
		<button type="button" id="publishedBtn" class="btn btn-default btn-sm" style="height:40px;font-size:20px;line-height: 20px;">发表博客</button>
	</div>

	<div class="editormd" id="test-editormd" style="margin-left: 10px;;height: 1000px">
		<textarea class="editormd-markdown-textarea" style="margin-left: 10px;"></textarea>
		<!-- 第二个隐藏文本域，用来构造生成的HTML代码，方便表单POST提交，这里的name可以任意取，后台接受时以这个name键为准 -->
		<!--<textarea class="editormd-html-textarea" id="content"></textarea>-->
	</div>

	<div style="margin-right: 8px;line-height: 32px;display: -ms-flexbox;display: flex;">
		<span class="blogTag">aaaa</span><i class="fa fa-trash" style="line-height: 15px;height: 21px;">
		<button type="button" id="type" class="btn btn-default btn-sm" style="height:40px;font-size:20px;line-height: 20px;">发表博客</button>
	</div>

</div>
</div>


</div>


<script th:inline="javascript">
/*<![CDATA[*/
var testEditor;
var id = [[${id}]];
$(function(){
    init();
});
function init() {
    //    调用编辑器
    if(id!=""&&id!=null){
        $.ajax({
            url: "/blog/getContent",
            dataType:"json",
            type:"post",
            data:{"id":id},
            success: function (data) {
                initEdit(data.obj.md);
                $("#navLi2").html("编辑博客");
                $("#title").val(data.obj.blog.title);
            }
        });
	}else {
        initEdit("");
	}


    $("#publishedBtn").click(function () {
        var title = $("#title").val();
        if(title==""){
            layer.msg("标题不能为空！！！",{icon:0});
            return;
        }
        //var content = $("#content").val();
        var content = testEditor.getMarkdown();
        if(content==""){
            layer.msg("博客内容不能为空！！！",{icon:0});
            return;
        }
        if(id!=""&&id!=null){
            modify(id,title,content);
		}else {
            publish(title,content);
		}

    });
}
function modify(blogId,title,content) {
    $.ajax({
        url: "/blog/modify",
        dataType:"json",
        type:"post",
        data:{"title":title,"content":content,"id":blogId},
        success: function (data) {
            if (data.code == 200){
                layer.msg("修改成功！！！",{icon:1});
                window.location.href="/blog/blog?id="+data.obj.id;
			}
        },
        error:function (error) {
            layer.msg("修改失败",{icon:2});
        }
    });
}
//发表博客
function publish(title,content) {
    $.ajax({
        url: "/blog/publish",
        dataType:"json",
        type:"post",
        data:{"title":title,"content":content},
        success: function (data) {
            layer.msg("发布成功！！！",{icon:1});
            window.location.href="/blog/blog?id="+data.obj.id;
        },
        error:function (error) {
            layer.msg("发布失败",{icon:2});
        }
    });
}
function initEdit(md) {
    testEditor = editormd("test-editormd", {
        width: "100%",
        height: 800,
        path: '/plugins/blog/lib/',
        //theme : "dark",   //styl//previewTheme : "dark",  //styl//editorTheme : "pastel-on-dark",  //styl
        markdown: md,
        codeFold: true,//syncScrolling : false,
        saveHTMLToTextarea: true,    // 保存 HTML 到 Textarea  这个配置，方便post提交表单
        searchReplace: true,//watch : false,                // 关闭实时预览
        htmlDecode: "style,script,iframe|on*",            // 开启 HTML 标签解析，为了安全性，默认不开启//toolbar  : false,             //关闭工具栏//previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启
        emoji: true,
        taskList: true,
        tocm: true,         // Using [TOCM]
        tex: true,                   // 开启科学公式TeX语言支持，默认关闭
        flowChart: true,             // 开启流程图支持，默认关闭
        sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,//dialogLockScreen : false,   // 设置弹出层对话框不锁屏，全局通用，默认为true//dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true//dialogDraggable : false,    // 设置弹出层对话框不可拖动，全局通用，默认为true//dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度，全局通用，默认值为0.1//dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
        imageUpload: true,
        imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
        imageUploadURL: "/blog/editormdUploadFile",
        //onload: function () {
        //console.log('onload', this);
        //this.fullscreen();//this.unwatch();//this.watch().fullscreen();//this.setMarkdown("#PHP");//this.width("100%");//this.height(480);//this.resize("100%", 640);
        //}
    });
}
/*]]>*/
</script>

<style type="text/css">
	span.blogTag{
		margin-top: 5px;
		display: block;
		padding: 3px 8px;
		font-size: 12px;
		max-width: 480px;
		background: #e9e9e9;
		border-radius: 2px;
		line-height: 15px;
		height: 21px;
		color: #4f4f4f;
		overflow: hidden;
		white-space: nowrap;
		box-sizing: border-box;
		outline: none;
	}
</style>
</body>
</html>
